<template>
  <div class="tab-search">
    <input type="text" v-model="value" @input="inputChange"/>
  </div>
</template>

<script>
export default {
    name: 'tab-search',
    props:['searchVal','changeVal'],
    data() {
        return {
            value:this.searchVal
        }
    },
    watch: {
        value(newValue) {
            this.$emit('inputChange', newValue);
        },
        changeVal(newValue) {
            this.value = newValue;
        }
    }
}
</script>

<style>
.tab-search {
    height: 50px;
    padding: 5px 10px;
    border-bottom: 1px solid #454545;
    box-sizing: border-box;
}
input {
    height: 40px;
    width: 380px;
    box-sizing: border-box;
}
</style>
